<template>
	<base-page :downloadType="true">
		<cu-custom bgColor="bg-white" slot="header" :isBack="true">
			<!-- #ifdef MP-WEIXIN -->
			<block slot="content">
				<view class="text-center text-black ">{{ getcontentList.nickname }}</view>
			</block>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<block slot="right">
				<view class="sflex-boxs">
					<view class="flex-box">
						<view class="user-Icon"><image :src="getcontentList.headimg" mode=""></image></view>
						<view class="user-infos" style="padding-left: 20rpx;">
							<view class="userNames">{{ getcontentList.nickname }}</view>
						</view>
					</view>
					<view class="gz" v-if="isShop == 0" @click="addFollowBtn()">+关注</view>
					<view class="gz" v-if="isShop > 0" @click="delFollowBtn()">已关注</view>
				</view>
			</block>
			<!-- #endif -->
		</cu-custom>

		<view slot="center">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
				<swiper
					class="screen-swiper"
					style="height: 1000rpx;"
					:class="dotStyle ? 'square-dot' : 'round-dot'"
					:indicator-dots="true"
					:circular="true"
					:autoplay="true"
					interval="5000"
					duration="500"
				>
					<swiper-item v-for="(item, index) in getcontentList.imageArr" :key="index"><image :src="item" mode="aspectFill"></image></swiper-item>
				</swiper>

				<view class="container">
					<view class="title">{{ getcontentList.title }}</view>
					<view class="content" v-html="getcontentList.content"></view>
					<view class="edit_time">编辑于:{{ this.$Utils.formatDate(getcontentList.createtime * 1000) }}</view>
				</view>

				<view class="related_goods">
					<view class="related_goods_title">关联商品</view>
					<view class="live-broadsast">
						<scroll-view class="scroll-live" :scroll-x="true" :scroll-with-animation="true">
							<view class="scroll-live-item">
								<view class="related_goods_box" v-for="(item, inx) in getcontentList.good" :key="inx" @click="todetail(item.sku_id, item.type)">
									<image :src="item.sku_image" mode="" class="image-radius" style="width: 120rpx;height: 120rpx;margin: 10rpx 0 0 10rpx;" />
									<view class="related_goods_info">
										<view class="related_goods_info_title">{{ item.sku_name }}</view>
										<view class="related_goods_info_remarks">{{ item.introduction || '暂无简介' }}</view>
										<view class="related_goods_info_price">¥{{ item.price }}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="comment">
					<view class="comment_title">评论</view>
					<view class="item-list" style="align-items: unset;" v-for="(item, i) in getCommentListContent" :key="i">
						<view class="item-list-Interactive"><view class="cu-avatar xs round " :style="{ 'background-image': 'url(' + item.headimg + ')' }"></view></view>
						<view class="info-details">
							<view class="list-center">
								<view class="center-status">
									<view class="status-text">{{ item.nickname }}</view>
								</view>
								<!-- 								<view class="center-time">
									<text class="lg text-gray cuIcon-like"></text>
									<text>{{item.love_num}}</text>
								</view> -->
							</view>
							<view class="info-msg-Two textoverflow">{{ item.comment }}</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<!--  -->
		<view class="" slot="below">
			<view class="bottom">
				<view class="cu-bar tabbar bg-white">
					<view class="search-form round">
						<text class="cuIcon-comment"></text>
						<input @confirm="clickRequest" v-model="keyText" @input="inputVal" type="text" placeholder="说点什么吧..." confirm-type="send" />
					</view>
					<!-- 					<view class="bottom-icon iconAppreciate" @click="FabulousContent()">
						<text class="lg text-gray cuIcon-appreciate"></text>
						<text>{{getcontentList.love_num}}</text>
					</view>

					<view class="bottom-icon iconFavor">
						<text class="lg text-gray cuIcon-favor"></text>
						<text>{{getcontentList.collect_num}}</text>
					</view>

					<view class="bottom-icon iconComment">
						<text class="lg text-gray cuIcon-comment"></text>
						<text>{{getcontentList.comment_num}}</text>
					</view> -->
				</view>
			</view>
		</view>
	</base-page>
</template>

<script>
import $Axios from '@/common/js/request/http.js';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	name: 'ImageTextDetails',
	data() {
		return {
			backSolt: false,
			zhibo: true,
			dotStyle: true,
			getcontentList: {},
			isShop: 0,
			getCommentListContent: [],
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			keyText: '',
			content_id: '',
			member_id: ''
		};
	},
	onLoad(e) {},
	onShow(e) {
		this.content_id = this.$Router.queryObj().content_id;
		this.getcontent(this.$Router.queryObj().content_id, 'graphic');
	},
	created() {

	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e;
		},
		/*下拉刷新的回调 */
		downCallback(e) {
			this.mescroll.resetUpScroll();
		},
		/*上拉加载的回调 */
		upCallback(page) {
			console.log('logpage', page);
			this.getCommentList(this.content_id, page.num, 5);
		},

		getcontent(content_id, type) {
			$Axios
				.post(`api/content/getGraphicAndVideoAndLiveInfo`, {
					content_id: content_id,
					type: type
				})
				.then(res => {
					this.getcontentList = res;
					this.shop = res.is_love;
					this.member_id = res.member_id;
					this.checkMemberFollow(res.member_id);
					if (this.getcontentList.content != null) {
						this.getcontentList.content = this.getcontentList.content.replace(/<img/g, "<img style='width:100%'");
					}
				});
		},

		getCommentList(content_id, page, page_size) {
			$Axios
				.post(`api/content/getCommentList`, {
					content_id: content_id,
					page: page,
					page_size: page_size
				})
				.then(res => {
					this.mescroll.endSuccess(res.list.length);
					if (res.list.length > 0) {
						if (page == 1) {
							this.getCommentListContent = res.list;
						} else {
							this.getCommentListContent = this.getCommentListContent.concat(res.list);
						}
					}
				});
		},

		clickRequest() {
			if (this.keyText == '') {
				this.$Utils.tip('说点什么吧...');
				return;
			}
			if (this.content_id == '') {
				this.$Utils.tip('缺少content_id...');
				return;
			}
			$Axios
				.post(`api/content/pushComment`, {
					content_id: this.content_id,
					comment: this.keyText
				})
				.then(res => {
					this.getCommentList(this.content_id, 1, 5);
					this.keyText = '';
				});
		},

		inputVal(e) {
			this.keyText = e.detail.value;
		},

		delFollowBtn() {
			var that = this;
			if (!this.$Utils.isLoginCall()) return false;
			uni.showModal({
				title: '温馨提示',
				content: '是否确定取消关注该用户?',
				success: res => {
					if (res.confirm) {
						$Axios
							.post(`api/MemberFollow/deleteMemberFollow`, {
								followers_id: that.member_id
							})
							.then(res => {
								that.$Utils.tip('取消关注成功');
								that.isShop = 0;
							});
					}
				}
			});
		},

		addFollowBtn() {
			var that = this;
			if (!this.$Utils.isLoginCall()) return false;
			$Axios
				.post(`api/MemberFollow/addMemberFollow`, {
					followers_id: that.member_id
				})
				.then(res => {
					this.$Utils.tip('关注成功');
					this.isShop = 1;
				});
		},

		checkMemberFollow(member_id) {
			$Axios
				.post(`api/MemberFollow/checkMemberFollow`, {
					followers_id: member_id
				})
				.then(res => {
					this.isShop = res;
				});
		},

		todetail(sku_id, type) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					sku_id: sku_id,
					is_id: sku_id,
					type: 1
				}
			});
		}

		// checkFabulousContent(content_id){
		// 	$Axios.post(`api/content/checkFabulousContent`,{
		// 		content_id:content_id
		// 	}).then(res=>{
		// 		console.log("checkFabulousContent",res)
		// 	})
		// },

		// FabulousContent(content_id){
		// 	$Axios.post(`api/content/FabulousContent`,{
		// 		content_id:content_id
		// 	}).then(res=>{
		// 		console.log("FabulousContent",res)
		// 	})
		// }
	},
	mounted() {}
};
</script>

<style lang="scss" scoped>
image {
	width: 100%;
	height: 100%;
}

.detailsHeader {
	margin: 10rpx;

	.detailsBack {
		display: inherit;
		float: left;
		line-height: 100rpx;
	}

	.detailsImage {
		width: 80rpx;
		height: 80rpx;
		margin: 10rpx;
		box-shadow: 0rpx 0rpx 10rpx #b4b6ba;
	}

	.shop_name {
		font-size: 32rpx;
		line-height: 44rpx;

		.zhibo {
			font-size: 20rpx;
			padding: 5rpx 10rpx;
			margin: 0rpx 14rpx;
			color: #ff394b;
			width: 72rpx;
			height: 28rpx;
			background: #ffffff;
			box-shadow: 0rpx 1rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 15rpx;
		}
	}

	.shop_addr {
		font-size: 22rpx;
		color: #999999;
		line-height: 44rpx;
	}

	.buttonFollow {
		// float: right;
		color: #ffffff;
		font-size: 24rpx;
		width: 108rpx;
		height: 48rpx;
		background: linear-gradient(-90deg, #ff7124, #ff364e);
		border-radius: 24rpx;
		margin: 0 10rpx;
	}

	.buttonShare {
		margin: 0 10rpx;
	}
}

.container {
	margin: 24rpx;

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
		margin: 24rpx 0;
	}

	.content {
		font-size: 28rpx;
		color: #222222;
	}

	.edit_time {
		font-size: 24rpx;
		color: #cccccc;
		margin: 24rpx 0;
	}
}

.related_goods {
	margin: 24rpx;

	.related_goods_title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
		margin: 24rpx 0;
	}
}

.live-broadsast {
	// padding: 0 0 30rpx 30rpx;
	.scroll-live {
		white-space: nowrap;
		width: 100%;

		.scroll-live-item {
			position: relative;
			display: inline-block;
			width: 490rpx;
			// height: 220rpx;
			// margin-right: 20rpx;
			display: flex;
			align-items: center;

			.related_goods_box {
				border-radius: 10rpx;
				background-color: #efefef;
				margin-right: 20rpx;

				.related_goods_info {
					display: inline-block;
					padding: 0 24rpx;
					line-height: 20px;

					.related_goods_info_title {
						width: 300rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}

					.related_goods_info_remarks {
						font-size: 24rpx;
						color: #666666;
					}

					.related_goods_info_price {
						font-size: 20rpx;
						color: #ff394b;
					}
				}
			}
		}

		.live-left-top {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			padding: 2rpx 18rpx 2rpx 2rpx;
			font-size: 16rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 40rpx;
			z-index: 2;
		}

		.image-radius {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}
}

.comment {
	margin: 24rpx;

	.comment_title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
		margin: 24rpx 0;
	}

	// .comment_input::-webkit-input-placeholder{
	// 	margin-left: 10rpx;
	// }
	// .comment_input::-moz-input-placeholder{
	// 	margin-left: 10rpx;
	// }
	// .comment_input::-ms-input-placeholder{
	// 	margin-left: 10rpx;
	// }
}

.item-list {
	width: 702rpx;
	height: auto;
	background: rgba(244, 244, 244, 0);
	box-shadow: 0rpx 1rpx 0rpx 0rpx #f4f4f4;
	margin: 0 auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: 24rpx;
	padding-bottom: 24rpx;

	.item-list-Interactive {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.info-details {
		padding-left: 16rpx;

		.info-msg {
			width: 593rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.info-msg-Two {
			width: 593rpx;
			font-size: 28rpx;
			// font-family: PingFang SC;
			// font-weight: 500;
			color: #222222;
			// padding-top: 22rpx;
			padding-left: 20rpx;
		}

		.list-center {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.center-status {
				display: flex;

				.status-text {
					line-height: 66rpx;
					font-size: 28rpx;
					color: #969999;
					margin-left: 10px;
				}

				.unread-icon {
					width: 14rpx;
					height: 14rpx;
					margin-left: 10rpx;
				}
			}

			.center-time {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
}

.bottom-icon {
	margin: 0 20rpx;
}

.flex-box {
	display: flex;
	align-items: center;
	padding-left: 10rpx;
}

.goBack-icon {
	width: 19rpx;
	height: 36rpx;
	margin-right: 40rpx;
}

.user-Icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}

.user-Icon image {
	border-radius: 50%;
}

.userNames {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}

.hbox {
	display: flex;
	align-items: center;
}

.dw-box {
	display: flex;
}

.address-icon {
	width: 20rpx;
	height: 23rpx;
}

.dingweitext {
	// width: 175rpx;
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	// overflow: hidden;
	// text-overflow: ellipsis;
	// white-space: nowrap;
}

.gz {
	// margin-left: 30rpx;
	margin-right: 30rpx;
	width: 100rpx;
	height: 48rpx;
	background: linear-gradient(-90deg, #ff7124, #ff364e);
	border-radius: 24rpx;
	text-align: center;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	line-height: 48rpx;
}

.sflex-boxs {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
